var nav = document.querySelectorAll(".nav > li");
var main = document.querySelectorAll(".main > div");


for(var i = 0;i<nav.length;i++){
    nav[i].index = i;
    nav[i].addEventListener("mouseover",function(){
        for(var j = 0;j<nav.length;j++){
            nav[j].classList.remove("active");
            main[j].classList.remove("active")
        }
        this.classList.add("active");
        main[this.index].classList.add("active")
    })
}